<template>
    <div>
        <!-- search start -->
        <search-bar
            @handleSearch="init"
        />
        <!-- search end -->

        <!-- table start -->
        <tableDataEl
                :tableData="tableData.list"
                :tableLabel="tableLabel"
                :pageCount="tableData.rows"
                :page.sync="page"
                :pageSize.sync="pageSize"
                ImgText="支付凭证"
                @handleCheckInc="handleCheckInc"
                @handleCheckTjr="handleCheckTjr"
        />
        <!-- table end -->

        <!-- dialog start -->
            <el-dialog
                :visible.sync="isShowInc"
                width="30%"
                center
                title="地区详情"
                v-el-drag-dialog
            >
                <table-data-el
                    height="20vh"
                    :isShowPagination="false"
                    :tableData="IncData.list"
                    :tableLabel="IncLabel"
                    :border="true"
                />
            </el-dialog>

            <el-dialog
                :visible.sync="isShowTjr"
                title="推荐人详情"
                center
                width="30%"
            >
            <div >
                <div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
import tableDataEl from '@/views/Setup/common/table'
export default {
    name: "registerAuditing",
    data (){
        return {
            tableData: [],
            tableLabel: [
                {
                    label: '运营商名称',
                    prop: 'company'
                },
                {
                    label: '负责人',
                    prop: 'leader'
                },
                {
                    label: '地区',
                    prop: '',
                    detail: true,
                    btnText: '详情',
                    methodName: 'handleCheckInc'
                },
                {
                    label: '支付凭证',
                    prop: 'voucher',
                    image: true
                },
                {
                    label: '推荐人',
                    key: true,
                    detail: true,
                    btnText: '详情',
                    methodName: 'handleCheckTjr'
                },
                {
                    label: '滤芯补助选择',
                    key: false,
                    detail: true,
                    btnText: '选择',
                    methodName: 'handleCheckTjr'
                },
                {
                    label: '详情',
                    prop: '',
                    btnText: '查看'
                }
            ],
            page: 1,
            pageSize:8,
            isShowInc: false,
            isShowTjr: false,

            IncData: [],
            IncLabel: [
                {
                    label: '省',
                    prop: 'province'
                },
                {
                    label: '市',
                    prop: 'city'
                },
                {
                    label: '县',
                    prop: 'county'
                }
            ]
        }
    },
    components: {
        tableDataEl
    },
    methods: {
        async init (search = '') {
            let paramsStr = Object.assign(search,{page: this.page,pageSize: this.pageSize})
            let res = await this.api.registerAuditing(paramsStr)
            this.tableData = res.data;
            console.log(this.tableData)
        },
        async handleCheckInc (...value) {
            let res = await this.api.RegisteCheckRegion({inc_id: value[1]['inc_id']});
            this.IncData = res.data
            this.isShowInc = true
        },
        async handleCheckTjr () {
            this.isShowTjr = true;
        }
    },
    mounted () {

    },
    beforeMount() {
        this.init()
    },
    watch: {
        page (){
            this.init()
        },
        pageSize () {
            this.init()
        }
    }
}
</script>

<style scoped>

</style>
